<template>
  <div
    id="tea-columnar"
    :class="className"
    :style="{ width: '500px', height: '500px' }"
  />
</template>

<script>
import { getTeaColumnar } from '@/api/home';
export default {
  props: {
    className: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      options: {
        title: {
          text: '等级柱状图',
          x: 'center' // 标题位置   居中
        },
        tooltip: {}, // 提示框组件
        legend: {
          // 图例组件
          orient: 'vertical',
          x: 'left', // 可设定图例在左、右、居中
          padding: [0, 50, 0, 0], // 可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          data: ['国家级', '省级'] // 图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name
        },
        xAxis: {
          // 直角坐标系 grid 中的 x 轴
          data: []
        },
        yAxis: {},
        series: [
          {
            // 系列列表
            name: '国家级', // 系列名称，用于tooltip的显示，legend 的图例筛选
            type: 'bar', // 类型
            data: [] // 系列中的数据内容数组。数组项通常为具体的数据项
          },
          {
            // 系列列表
            name: '省级', // 系列名称，用于tooltip的显示，legend 的图例筛选
            type: 'bar', // 类型
            data: [] // 系列中的数据内容数组。数组项通常为具体的数据项
          }
        ]
      }
    };
  },
  created() {},
  mounted() {
    // getTeaColumnar().then((res) => {
    //   const provinceList = res.data.data.map((item) => item.province);
    //   const nationalLevel = res.data.data.map((item) => {
    //     return {
    //       name: item.province,
    //       value: item.nationalLevelCount
    //     };
    //   });
    //   const provinceLevel = res.data.data.map((item) => {
    //     return {
    //       name: item.province,
    //       value: item.provinceLevelCount
    //     };
    //   });
    //   this.options.xAxis.data = provinceList;
    //   this.options.series[0].data = nationalLevel;
    //   this.options.series[1].data = provinceLevel;
    //   this.init();
    // });
    this.init();
  },
  methods: {
    init() {
      const echarts = require('echarts');
      console.log(echarts);
      const myChart = echarts.init(document.getElementById('tea-columnar'));
      // 绘制图表
      myChart.setOption(this.options);
    }
  }
};
</script>

<style>
</style>
